<template>
  <div class="aside-detail">
    <div
      class="logo"
      :style="{ backgroundImage: `url(${choosedItem.thumbnail})` }"
    ></div>
    <div class="title">{{ choosedItem.fileName }}</div>
    <div class="tags">
      <tagsGroup
        @openDialog="openDialog"
        :showAddBtn="true"
        :showTagsArr="showTagsArrCopy"
      ></tagsGroup>
    </div>
    <div class="text-con">
      <div class="tit">基本详情</div>
      <template v-if="dataTypeTabsId == 2">
        <div class="params">
          任务名称:
          {{ choosedItem.taskName }}
        </div>
        <div class="params">
          侦察对象:
          {{ choosedItem.zzdx }}
        </div>
        <div class="params">
          尺寸:
          {{ choosedItem.imageSize }}
        </div>
        <div class="params">
          创建时间:
          {{ choosedItem.createDate }}
        </div>
        <div class="params">
          修改时间:
          {{ choosedItem.updateDate }}
        </div>
        <div class="params">
          图像来源:
          {{ choosedItem.source }}
        </div>
        <div class="params">
          侦察手段:
          {{ choosedItem.platformName }}
        </div>
        <div class="params">
          传感器类型:
          {{ choosedItem.sensorName }}
        </div>
        <div class="params">
          数据类别:
          {{ choosedItem.isProduct ? "成果数据" : "原始数据" }}
        </div>
      </template>
      <template v-if="dataTypeTabsId == 3">
        <div class="params">
          任务名称:
          {{ choosedItem.taskName }}
        </div>
        <div class="params">
          侦察对象:
          {{ choosedItem.zzdx }}
        </div>
        <div class="params">
          视频标题:
          {{ choosedItem.videoTitle }}
        </div>
        <div class="params">
          重要程度:
          {{ choosedItem.importanceName }}
        </div>
        <div class="params">
          视频来源:
          {{ choosedItem.source }}
        </div>
        <div class="params">
          侦察手段:
          {{ choosedItem.platformName }}
        </div>
        <div class="params">
          视频类别:
          {{ choosedItem.fileType }}
        </div>
        <div class="params">
          传感器类型:
          {{ choosedItem.sensorName }}
        </div>
        <div class="params">
          数据类别:
          {{ choosedItem.isProduct ? "成果数据" : "原始数据" }}
        </div>
        <div class="params">
          数据时间:
          {{ choosedItem.createDate }}
        </div>
      </template>
    </div>
    <el-dialog
      :title="dialogTitle"
      :append-to-body="true"
      :visible.sync="tagsEditDialogVisible"
    >
      <div class="body">
        <div class="item" v-for="(item, index) in tagsList" :key="index">
          <div class="tit">{{ item.name }}</div>
          <!-- // 增加isGray 背景是否为灰色（未选中状态） 字段  判断是否显示灰色背景 -->
          <tagsGroup
            :groupId="item.id"
            :isEdit="true"
            :tagsEdit="
              item.categoryTypeList.map((item) => {
                item.isGray = true;
                showTagsArr.forEach((key) => {
                  if (key == item.id) {
                    item.isGray = false;
                  }
                });
                return item;
              })
            "
            :showTagsArr="showTagsArr"
            @changeTagsArr="changeTagsArr"
          ></tagsGroup>
        </div>
      </div>
      <div class="footer flex-center">
        <div class="cancel" @click="tagsEditDialogVisible = false">取消</div>
        <div class="confirm" @click="submit">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tagsGroup from "@/components/common/tagsGroup.vue";
import { mapState } from "vuex";
export default {
  components: {
    tagsGroup,
  },
  data() {
    return {
      tagsEditDialogVisible: false,
      dialogTitle: "标签",
      tagsList: [],
      showTagsArr: [],
      updateList: [], //更新标签后的数组
      showTagsArrCopy: [],
    };
  },
  watch: {
    choosedItem: {
      handler() {
        this.showTagsArr = this.choosedItem.categoryTypeList.map((item) => {
          return item.id;
        });
        this.showTagsArrCopy = this.choosedItem.categoryTypeList.map((item) => {
          return item.id;
        });
      },
      deep: true,
    },
  },
  computed: {
    ...mapState({
      dataTypeTabsId(state) {
        return state.app.dataTypeTabsId;
      },
      targetTreeChecked(state) {
        return state.app.targetTreeChecked;
      },
      user(state) {
        return state.user;
      },
    }),
  },
  props: {
    choosedItem: {
      default: () => {
        return {
          categoryTypeList: [],
        };
      },
    },
  },
  created() {
    // console.log(789, this.choosedItem);
    let arr = this.choosedItem.categoryTypeList.map((item) => {
      return item.id;
    });
    this.showTagsArr = arr;
    // 编辑标签时不与这里联动
    this.showTagsArrCopy = JSON.parse(JSON.stringify(arr));
  },
  methods: {
    openDialog() {
      this.$api.categoryAndGroup().then((res) => {
        this.tagsList = res;
      });
      this.tagsEditDialogVisible = true;
    },
    changeTagsArr(e) {
      this.showTagsArr = e;
    },
    submit() {
      if (this.dataTypeTabsId == 2) {
        let data = {
          categoryIds: this.showTagsArr,
          fileName: this.choosedItem.fileName,
          isProduct: this.choosedItem.isProduct,
          memo: this.choosedItem.memo,
          operator: this.user.loginName || "游客",
          platformId: this.choosedItem.platformId,
          sensorId: this.choosedItem.sensorId,
          shotDate: this.choosedItem.shotDate,
          source: this.choosedItem.source,
          targetType: this.choosedItem.targetType,
        };
        data.id = this.choosedItem.id;
        data.ids = [this.choosedItem.id];
        this.$api.updateZCImage(data).then((res) => {
          if (res.indexOf("200") != -1) {
            this.$confirm("", "编辑成功", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              center: true,
              showCancelButton: false,
            })
              .then(() => {
                this.tagsEditDialogVisible = false;
                this.showTagsArrCopy = JSON.parse(
                  JSON.stringify(this.showTagsArr)
                );
              })
              .catch(() => {
                this.tagsEditDialogVisible = false;
              });
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
      } else if (this.dataTypeTabsId == 3) {
        let data = {
          categoryIds: this.showTagsArr,
          classificationId: this.choosedItem.classificationId,
          fileName: this.choosedItem.fileName,
          importanceId: this.choosedItem.importanceId,
          isProduct: this.choosedItem.isProduct,
          keywords: this.choosedItem.keywords,
          memo: this.choosedItem.memo,
          // realFileUrl: this.choosedItem.realFileUrl,
          operator: this.user.loginName || "游客",
          sensorId: this.choosedItem.sensorId,
          source: this.choosedItem.source,
          targetType: this.choosedItem.targetTreeSingleId,
          videoType: this.choosedItem.videoType,
          regionName: this.choosedItem.regionName,
        };
        data.id = this.choosedItem.id;
        data.ids = [this.choosedItem.id];
        this.$api.updateZCVideo(data).then((res) => {
          if (res.indexOf("200") != -1) {
            this.$confirm("", "编辑成功", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              center: true,
              showCancelButton: false,
            })
              .then(() => {
                this.tagsEditDialogVisible = false;
                this.showTagsArrCopy = JSON.parse(
                  JSON.stringify(this.showTagsArr)
                );
              })
              .catch(() => {
                this.tagsEditDialogVisible = false;
              });
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.aside-detail {
  @include scrollBar;
  overflow-y: auto;
  width: 2.87rem;
  padding: 0 0.23rem;
  position: absolute;
  right: 0;
  bottom: 0;
  height: calc(100vh - 0.76rem);
  background: url(~@/assets/common/rectangle3.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  word-wrap: break-word;
  .logo {
    // background-image: url(~@/assets/common/20.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin-top: 0.24rem;
    height: 1.6rem;
    border-radius: 0.1rem;
  }
  .title {
    margin-top: 0.12rem;
    font-size: 0.14rem;
    font-weight: 400;
    color: #ffffff;
    overflow: hidden;
  }
  .des {
    margin-top: 0.1rem;
    font-size: 0.14rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #bbbbbb;
  }
  .tags {
    color: white;
    margin-top: 0.2rem;
    width: 2.4rem;
    min-height: 1rem;
    max-height: 2rem;
    @include scrollBar;
    overflow-y: auto;
    background: #034475;
    border-radius: 0.05rem;
  }
  .text-con {
    .tit {
      margin-top: 0.2rem;
      font-size: 0.14rem;
      font-weight: 400;
      color: #ffffff;
    }
    .params {
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
      text-align: justify;
      margin-top: 0.1rem;
      font-size: 0.14rem;
      font-weight: 400;
      color: #ffffff;
      opacity: 0.67;
      span {
        word-wrap: break-word;
      }
    }
  }
}
::v-deep .el-dialog {
  z-index: 1000;
  color: #ffffff;
  font-size: 0.16rem;
  width: 6rem !important;
  background: #474747;
  box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
  border-radius: 0.05rem;
  .body {
    @include scrollBar;
    color: #ffffff;
    height: 3.6rem;
    overflow-y: auto;
    .tit {
      margin-top: 0.1rem;
      margin-bottom: 0.1rem;
    }
  }
  .el-dialog__header {
    padding: 0.16rem;
    background: #143853 !important;
  }
  .el-dialog__body {
    padding: 0 0px 10px 20px;
    color: #ffffff;
    background: #0f2d43 !important;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .footer {
    margin-top: 0.2rem;
    color: #ffffff;
    margin-right: 0.3rem;
    justify-content: flex-end;
    .cancel {
      text-align: center;
      width: 1.2rem;
      height: 0.38rem;
      line-height: 0.38rem;
      background: #62656c;
      border-radius: 0.05rem;
    }
    .confirm {
      margin-left: 0.2rem;
      text-align: center;
      width: 1.2rem;
      height: 0.38rem;
      line-height: 0.38rem;
      background: #1890ff;
      border-radius: 0.05rem;
    }
  }
}
</style>